<template>
  <a-spin tip="Loading..." :spinning="spinning">
  <div>
    <a-row>
      <a-col span="8">
        <!-- <a-row type="flex" justify="space-around"> -->
          <a-button style="margin-right:8px" type="primary" @click="goMoneyIn">预存款导入</a-button>
          <a-button style="margin-right:8px"  type= 'primary' @click="showModal">预存款充值</a-button>
        <a-button style="margin-right:8px" type="primary" @click="export_se">导出</a-button>
        <!--<a-button style="margin-right:8px" type="primary" @click="exportModal2">导出</a-button>-->
        <a-modal title="导出" :visible="exportVisible2" @ok="exportOk2" @cancel="exportCancel2">
          <a-row>
            <a-form>
              <a-form-item label="小区" :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-select placeholder="请选择所属小区" v-decorator="['bd_info_id',{rules:[{required:true,message:'请选择小区'}]}]">
                  <a-select-option v-for="(item,index) in bd_info" @click="bdPro(index)" :key="index" :value="item.id">{{item.name}}</a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item label="关键字" :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-input v-model="hi2"></a-input>
              </a-form-item>
            </a-form>
          </a-row>
        </a-modal>
        <a-modal
                title="确认窗口"
                :visible="show_se"
                @ok="exportOk2"
                @cancel="export_se_cel"
        >
          <span v-for="(item,index) in qu_s" :key="index" style="padding: 3px;font-size: 16px">{{item}}<br /></span>
        </a-modal>
          <a-modal title="预存款充值" :visible="visible" @ok="handleOk" @cancel="handleCancel">
            <a-row>
              <a-form>
                <a-form-item label="小区" :label-col="labelCol" :wrapper-col="wrapperCol">
                  <a-select placeholder="请选择小区" v-model="formData.bd_id">
                    <a-select-option v-for="(item,index) in bd_infos" :key="index" :value="item.id" @click="bd_click(item.id)">{{item.name}}</a-select-option>
                  </a-select>
                </a-form-item>
                <a-form-item label="选择住户" :label-col="labelCol" :wrapper-col="wrapperCol">
                  <a-select
                    showSearch
                    @focus="clearList"
                    @search="handleSearch"
                    placeholder="请输入住户手机/姓名"
                    :showArrow="false"
                    @change="userChange"
                    :notFoundContent="fetching ? undefined : '无匹配结果'"
                    allowClear optionFilterProp="children"
                  >
                    <a-spin v-if="fetching" slot="notFoundContent" size="small"/>
                    <a-select-option
                      v-for="(item, index) in userInfo"
                      :key="index"
                      :value="item.id"
                    >{{item.data}}</a-select-option>
                  </a-select>
                </a-form-item>
                <a-form-item label="充值类型" :label-col="labelCol" :wrapper-col="wrapperCol">
                  <a-radio-group name="radioGroup" :defaultValue="1" v-model="formData.type">
                    <a-radio :value="1">通用预存款</a-radio>
                    <a-radio :value="2">专用预存款</a-radio>
                  </a-radio-group>
                </a-form-item>
                <a-form-item
                  label="专用款名称"
                  :label-col="labelCol"
                  :wrapper-col="wrapperCol"
                  v-if="formData.type == 2"
                >
                    <a-select placeholder="请选择专用款" @change="seCategory">
                      <a-select-option v-for="(item,index) in zy_list" :key="index" :value="item.name">{{item.name}}</a-select-option>
                  </a-select>
                </a-form-item>
                <a-form-item label="充值金额" :label-col="labelCol" :wrapper-col="wrapperCol">
                  <a-input v-model="formData.price"></a-input>
                </a-form-item>
                <a-form-item label="实收金额" :label-col="labelCol" :wrapper-col="wrapperCol">
                  <a-input v-model="formData.money"></a-input>
                </a-form-item>
                <a-form-item label="备注" :label-col="labelCol" :wrapper-col="wrapperCol">
                  <a-input v-model="formData.remarks"></a-input>
                </a-form-item>
              </a-form>
            </a-row>
          </a-modal>
        <!-- </a-row> -->
      </a-col>
      <a-col span="7" offset="7">
        <a-row type="flex" justify="space-around">
          <a-col span="6">
            <a-select defaultValue="1" style="width: 100%" @change="handleChange">
              <a-select-option value="1">住户</a-select-option>
              <a-select-option value="2">房屋</a-select-option>
            </a-select>
          </a-col>
          <a-col span="10">
            <a-input-search @search="onSearch"></a-input-search>
          </a-col>
          <a-col span="2">
            <a-button @click="depFilter">
              <a-icon type="filter" />
            </a-button>
            <a-modal title="筛选" :visible="v_filter" @ok="filterOk" @cancel="filterCancel">
              <a-row>
                <a-form>
                  <a-form-item label="选择小区" :label-col="labelCol" :wrapper-col="wrapperCol">
                    <a-select placeholder="请选择小区" @change="selectBd">
                      <a-select-option
                              :value="item.id"
                              v-for="(item, index) in bd_info"
                              :key="index"
                      >{{ item.name }}</a-select-option>
                    </a-select>
                  </a-form-item>

                  <a-form-item label="关键字" :label-col="labelCol" :wrapper-col="wrapperCol">
                    <a-input v-model="hi"></a-input>
                  </a-form-item>
                </a-form>
              </a-row>
            </a-modal>
          </a-col>
        </a-row>
      </a-col>
    </a-row>
    <br />
    <a-row>
      <s-table ref="table" :columns="columns" :data="dataSource">
        <template slot="balance" slot-scope="text, record">
          ¥{{text}}
        </template>
        <template slot="remarks" slot-scope="text, record">
          <a-tooltip placement="left">
            <template slot="title">
              <p>{{text}}</p>
            </template>
            <a-icon type="bars" style="cursor: pointer;"></a-icon>
          </a-tooltip>
        </template>
        <a slot="action" slot-scope="text, record" href="javascript:;">
          <a-dropdown :trigger="['click']">
            <a class="ant-dropdown-link" href="#">
              操作
              <a-icon type="down" />
            </a>
            <a-menu slot="overlay">
              <a-menu-item key="0">
                <a href="javascript:void(0)" @click="look_det(record.id)">详情</a>
                <a href="javascript:void(0)" @click="cancelPrice(record.id)">退款</a>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </a>
      </s-table>
      <a-row style="height:45px;background-color: #fafafa;" type="flex" justify="center">
            <a-col span="16"></a-col>
            <a-col class="tdx_w" span="4" align="center" style="line-height:45px">
              总计：
            </a-col>
            <a-col class="tdx_w" span="4" align="center"  style="line-height:45px">
              ¥{{ps|| '0'}}            
            </a-col>
          
        </a-row>
      <!-- <a-row style="float: right">
        <div>
          <tr>
            <td class="tdx tdx_w">总计：¥{{ps}}</td>
          </tr>
        </div>
      </a-row> -->
      <a-modal title="预存款退款" :visible="visible2" @ok="handleOk2" @cancel="handleCancel2">
        <a-row>
          <a-form>
            <!--<a-form-item label="退款人" :label-col="labelCol" :wrapper-col="wrapperCol">-->
              <!--<a-input v-model="formData2.name"></a-input>-->
            <!--</a-form-item>-->
            <!--<a-form-item label="手机号" :label-col="labelCol" :wrapper-col="wrapperCol">-->
              <!--<a-input v-model="formData2.phone"></a-input>-->
            <!--</a-form-item>-->
            <a-form-item label="退款金额" :label-col="labelCol" :wrapper-col="wrapperCol">
              <a-input v-model="formData2.money" addonAfter="元"></a-input>
            </a-form-item>
            <a-form-item label="退款说明" :label-col="labelCol" :wrapper-col="wrapperCol">
              <a-input v-model="formData2.remarks"></a-input>
            </a-form-item>
          </a-form>
        </a-row>
      </a-modal>
    </a-row>
  </div>
  </a-spin>
</template>

<script>
import { getDespositList, getAllBdinfo, searchUser, saveDeposit,depositBack,getZy } from '@/api/cashier'
import { mapGetters } from 'vuex'
import {STable} from '@/components'
export default {
    name: 'charge_pre_deposit_depositList',
    components: {
        STable
    },
    data() {
        return {
            data: [],
            columns: [
                { title: 'ID', width: 80, dataIndex: 'id', key: 'id' },
                { title: '小区', width: 80, dataIndex: 'bd_info_id_text', key: 'name' },
                { title: '房号', width: 100, dataIndex: 'info', key: 'age' },
                { title: '住户', dataIndex: 'house_user_id_text', key: '1', width: 80 },
                { title: '手机号', dataIndex: 'phone', key: '2', width: 80 },
                // { title: '类型', dataIndex: 'category', key: '3', width: 80 },
                { title: '预存余额', dataIndex: 'balance', key: '4', width: 80,scopedSlots: { customRender: 'balance' } },
                { title: '备注', dataIndex: 'remarks', key: '5', width: 80,scopedSlots: { customRender: 'remarks' } },
                {
                    title: '操作',
                    key: 'operation',
                    width: 100,
                    scopedSlots: { customRender: 'action' }
                }
            ],
            visible: false,
            visible2: false,
            v_filter: false,
            show_se:false,
            spinning:false,
            zy_list:[],
            labelCol: {
                xs: { span: 24 },
                sm: { span: 6 }
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 15 }
            },
            bd_id:0,
            bdInfo: null,
            userInfo: null,
            fetching:false,
            bd_info:[],
            bd_infos:[],
            formData: {
                bd_id:'',
                seBd: '',
                seUser: '',
                type: 1,
                category: '',
                price: 0,
                money: 0,
                remarks: ''
            },
            formData2: {
                name:'',
                phone: '',
                money: '',
                remarks: ''
            },
            house:1,
            qu_s:[],
            mobile:'',
            searchVisible:false,
            bd_info_id:0,
            exportVisible2:false,
            tid:0,
            hi:'',
            hi2:'',
            ps:0,
            pas:[],
            queryParam: {},
            dataSource:parameter => {
                this.pas = parameter;
                return this.getList(Object.assign(parameter, this.queryParam))
                    .then(res => {
                        return res
                    })
            },
        }
    },
    computed: {},
    mounted() {
        this.getBdList();
        this.getBdList2();
        this.getZy();
    },
    methods: {
        ...mapGetters(['token', 'pmsArId', 'nowMg']),
        export_se () {
            this.spinning = true;
            let dit = {mobile:this.mobile,
                house:this.house,
                bd:this.bd_info_id,
                hei:this.hi};
            this.axios({
                method:'post',
                url:'/cashier/dep_list_exp_se',
                data:Object.assign(dit,{token:this.token()})
            }).then(res => {
                if(res.code==0){
                    this.show_se = true;
                    this.qu_s = res.msg;
                    this.spinning=false;
                }else if(res.code==1000){
                    this.spinning=false;
                }else{
                    this.spinning=false;
                    this.$message.warning(res.msg,2)
                }
            }).catch(err => {
                this.spinning=false;
                this.$message.error('服务器发生错误...',2);
            }).finally(() => {
                this.loading = false;
            })
        },
        export_se_cel(){
            this.show_se = false;
            this.spinning = false;
        },
        exportOk2() {
            this.spinning=true;
            this.show_se = false;
            this.baseExcDate={pageNo:1,pageSize:100};
            this.exportVisible2 = false;
            let qu = [];
            qu['hei'] = this.hi;
            qu['bd_info_id'] = this.bd_info_id;
            qu['mobile'] = this.mobile;
            qu['house'] = this.house;
            this.escec(Object.assign(this.baseExcDate, qu))
        },
        bdPro(v){
            this.bd_info_id = this.bd_info[v].id;
        },
        exportCancel2() {
            this.exportVisible2 = false
        },
        escec(param){
            this.loading = true;
            const _this=this;
            this.axios({
                method:'post',
                url:'/cashier/dep_list_exp',
                data:Object.assign(param,{token:this.token()})
            }).then(res => {
                if(res.code==0){
                    this.$message.success(`正在生成账单请不要刷新页面\n 当前${res.data.pageNo}/${res.data.totalPage}`,2);
                    // if(res.data.totalCount>res.data.pageNo){
                    _this.baseExcDate.pageNo=_this.baseExcDate.pageNo+1;
                    setTimeout(function(){
                        _this.escec(Object.assign(_this.baseExcDate, _this.queryParam))
                    },1400)

                    // }
                }else if(res.code==1000){
                    this.spinning=false;
                    window.location.href=this.baseURL+res.url;
                }else{
                    this.spinning=false;
                    this.$message.warning(res.msg,2)
                }
            }).catch(err => {
                this.spinning=false;
                this.$message.error('服务器发生错误...',2);
            }).finally(() => {
                this.loading = false;
            })
        },
        exportModal2() {
            this.exportVisible2 = true
        },
        handleChange(value) {
            this.house = value;
        },
        getList(param) {
            return new Promise((resolve,reject) => {
                this.axios({
                    method:'get',
                    url: '/cashier/get_desposit_list',
                    params:Object.assign(param,{token:this.token(),ar_id: this.pmsArId(),cm_mg_id: this.nowMg()})
                }).then(res => {
                    if(res.code === 0){
                        resolve(res.data);
                        this.ps = res.data['ps'];
                    }else{
                        this.$message.error(res.data.msg,2);
                    }
                }).catch(err => {
                    this.$message.error('服务器发生错误...',2);
                    this.loading = false;
                })
            })
        },
        getZy() {
            getZy({token:this.token()})
                .then(res => {
                    if (res.data.data.length > 0) {
                        this.zy_list = res.data.data;
                    } else {
                        this.zy_list = [];
                    }
                })
                .catch(err => {
                    console.log(err)
                })
        },
        getBdList(){
            this.axios({
                method:'get',
                url:'/community/get_bd_config_list',
                params:{token:this.token(),ar_id: this.pmsArId(),cm_mg_id: this.nowMg()}
            }).then(res => {
                let { code,msg,data } = res;
                if(code === 0){
                    let ifo = {id:0,name:'所有小区'};
                    data.unshift(ifo);
                    this.bd_info = data;
                }else this.$message.warning(msg);
            }).catch(err => {
                this.$message.error('服务器发生错误...');
            })
        },
        getBdList2(){
            this.axios({
                method:'get',
                url:'/community/get_bd_config_list',
                params:{token:this.token(),ar_id: this.pmsArId(),cm_mg_id: this.nowMg()}
            }).then(res => {
                let { code,msg,data } = res;
                if(code === 0){
                    this.bd_infos = data;
                }else this.$message.warning(msg);
            }).catch(err => {
                this.$message.error('服务器发生错误...');
            })
        },
        look_det(id) {
            const _this = this;
            _this.$router.push({ name: 'charge_pre_deposit_detail', params: { id: id } });
        },
        onSearch(value) {
            this.mobile = value;
            this.bd_info_id = 0;
            this.hi = '';
            this.queryParam['mobile'] = value;
            this.queryParam['house'] = this.house;
            this.$refs.table.refresh(true);
        },
        bd_click(v){
            this.bd_id = v;
        },
        setHi(v){
            this.hi = v;
        },
        showModal() {
            this.visible = true;
        },
        depFilter(){
            this.getBd();
            this.v_filter = true;
        },
        filterCancel() {
            this.v_filter = false;
        },
        filterOk() {
            this.v_filter = false;
            this.house = '';
            this.mobile = '';
            this.queryParam['mobile'] = '';
            this.queryParam['house'] = '';
            this.queryParam['bd'] = this.bd_info_id;
            this.queryParam['hei'] = this.hi;
            this.$refs.table.refresh(true);
        },
        goMoneyIn(){
            this.$router.push({ name: 'charge_pre_deposit_in' })
        },
        handleCancel() {
            this.visible = false
        },
        handleCancel2() {
            this.visible2 = false
        },
        handleOk() {
            if (!this.formData.seUser || !this.formData.type || !this.formData.price || !this.formData.money || !this.formData.bd_id) {
                return this.$message.error('请填写完整')
            } else {
                saveDeposit({ form: this.formData ,token:this.token()})
                    .then(res => {
                        if (res.code == 0) {
                            this.$message.success(res.msg);
                            setTimeout(() => {
                                this.visible = false;
                                this.$refs.table.refresh(true);
                            })
                        } else {
                            this.$message.error(res.msg);
                            setTimeout(() => {
                                this.visible = false;
                                this.$refs.table.refresh(true);
                            })
                        }
                    })
                    .catch(err => {
                        console.log(err)
                    })
            }
        },
        handleOk2() {
            if (!this.formData2.money || !this.formData2.remarks) {
                return this.$message.error('请填写完整')
            } else {
                this.formData2.id = this.tid;
                depositBack({ form: this.formData2 ,token:this.token()})
                    .then(res => {
                        if (res.code == 0) {
                            this.$message.success(res.msg);
                            setTimeout(() => {
                                this.visible2 = false;
                                this.$refs.table.refresh(true);
                            })
                        } else {
                            this.$message.error(res.msg);
                            setTimeout(() => {
                                this.visible2 = false;
                                this.$refs.table.refresh(true);
                            })
                        }
                    })
                    .catch(err => {
                        console.log(err)
                    })
            }
        },
        handleSearch(value) {
            this.fetching = true;
                searchUser({ search: value ,bd_id:this.bd_id,token:this.token()})
                    .then(res => {
                        this.userInfo = res.data;
                        this.fetching = false;
                    })
                    .catch(err => {
                        console.log(err);
                    })
        },
        selectBd(value) {
            this.bd_info_id = value;
            this.formData.seBd = value
        },
        selectBd1(value) {
            this.bd_info_id= value
        },
        userChange(value) {
            this.formData.seUser = value
        },
        seCategory(value) {
            this.formData.category = value
        },
        getBd() {
            getAllBdinfo({token:this.token()})
                .then(res => {
                    this.bdInfo = res.data
                })
                .catch(err => {
                    console.log(err)
                })
        },
        clearList(){
            this.userInfo = [];
        },
        cancelPrice(id) {
            this.tid = id;
            this.visible2 = true;
            // depositBack({token:this.token(),id:id})
            //     .then(res => {
            //         if(res.code === 0){
            //             this.$message.success(res.msg,1);
            //             this.$refs.table.refresh()
            //         }else{
            //             this.$message.error(res.msg,2);
            //         }
            //     })
            //     .catch(err => {
            //         console.log(err)
            //     })
        }
    }
}
</script>

<style scoped>
  .tdx{
    width: 100px;
    padding-right: 30px;
  }
  .tdx_w{
    font-weight:600;
  }
</style>